<template>
  <a-form
    class="form"
    :model="filterData"
    layout="inline"
    v-if="$route.params.tabStatus === 'all'"
  >
    <a-form-item key="keyword" name="keyword">
      <a-input
        v-model:value.trim="filterData.keyword"
        placeholder="搜索指标库名称"
      >
        <template #prefix> <search-outlined /> </template>
      </a-input>
    </a-form-item>
  </a-form>
  <Table :tableProps="tableProps" @tableChange="handleTableChange">
    <template #action="{ record }">
      <template v-if="record.status === 0">
        <a-button
          type="link"
          style="padding-right: 0"
          :loading="record.loading"
          @click="handleActionClick(record, approveIndicatorSystem)"
          >审核通过</a-button
        >
        <a-button
          type="link"
          style="padding-right: 0"
          :loading="record.loading"
          @click="handleActionClick(record, rejectIndicatorSystem)"
          >审核不通过</a-button
        >
      </template>
      <a-button
        v-else-if="record.enabled === 0"
        type="link"
        style="padding-right: 0"
        :loading="record.loading"
        @click="handleActionClick(record, publishIndicatorSystem)"
        >发布</a-button
      >
      <a-button
        v-else
        type="link"
        style="padding-right: 0"
        :loading="record.loading"
        @click="handleActionClick(record, disableIndicatorSystem)"
        >取消发布</a-button
      >
    </template>
  </Table>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getIndicatorsTableColumns } from "../config";
import {
  getAllIndicatorSystemForApproval,
  approveIndicatorSystem,
  publishIndicatorSystem,
  disableIndicatorSystem,
  rejectIndicatorSystem,
} from "@/api";
// import Modal from "ant-design-vue/es/modal";
import { useTableData } from "@/hooks";
import Table from "@/components/Table.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const filterData = ref<Record<string, any>>({
  tabStatus: route.params.tabStatus,
});
const { tableProps, handleTableChange, getData } = useTableData(
  getAllIndicatorSystemForApproval,
  filterData
);
tableProps.columns = getIndicatorsTableColumns();
const handleActionClick = (
  record: Record<string, any>,
  method: (...params: any) => Promise<any>
) => {
  record.loading = true;
  method(record.id)
    .then(() => {
      getData();
    })
    .catch(console.error)
    .finally(() => {
      record.loading = undefined;
    });
};
</script>
<style lang="scss" scoped></style>
